<template>
    <div class="page">
        <ChfForm v-bind="formConfig" @submit="handlersubmit" />
    </div>
</template>

<script>
import form from "@/mixins/form.js"
export default {
    mixins: [form],
    data () {
        return {
            formConfig: {
                formData: null,
                options: {
                    // inline:true,
                    labelWidth: "80px",
                    style: { width: "700px" },
                    // size: "small",
                },
                items: [
                    {
                        formItem: { label: "姓名" },
                        itemRender: {
                            el: "el-input",
                            placeholder: "请输入姓名",
                            value: "name",
                            style: { width: '400px' }
                        },
                    },
                    {
                        formItem: { label: "年龄" },
                        itemRender: {
                            el: "el-input-number",
                            label: "请输入年龄",
                            value: "age",
                            min: 1,
                            max: 150,
                        },
                    },
                    {
                        formItem: { label: "性别" },
                        itemRender: {
                            el: "el-select",
                            placeholder: "请选择性别",
                            value: "gender",
                            options: [],
                            style: { width: '400px' },
                            async query () {
                                setTimeout(() => {
                                    this.options = [
                                        { label: '男', value: 1 },
                                        { label: '女', value: 0 }
                                    ]
                                }, 1000);
                            }
                        },
                    },
                    {
                        formItem: { label: "出生日期", required: true },
                        itemRender: {
                            el: "el-date-picker",
                            placeholder: "选择时间",
                            value: "birthday",
                            type: 'datetime',
                            ['value-format']: "yyyy-MM-dd HH:mm:ss",
                            style: { width: '400px' },
                        },
                    },
                    {
                        formItem: { label: "区域" },
                        itemRender: {
                            el: "el-select",
                            placeholder: "请选择区域",
                            value: "county",
                            options: [],
                            style: { width: '400px' },
                            query () {
                                setTimeout(() => {
                                    this.options = [
                                        { label: '湖北省 汉川市 城隍镇', value: '湖北省 汉川市 城隍镇' },
                                        { label: '吉林省 白城市 洮北区', value: '吉林省 白城市 洮北区' },
                                    ]
                                }, 1000);
                            }
                        },
                    },
                    {
                        type: 'button',
                        formItem: {
                            children: [
                                {
                                    content: '提交', type: 'primary', submit: true, click: (form) => {
                                        this.submit({
                                            form,
                                            addApi: 'addTable',
                                            editApi: 'editTable',
                                        })
                                    }
                                },
                                {
                                    content: '返回', click: () => {
                                        this.$router.back();
                                    }
                                }
                            ]
                        }
                    }
                ],
                rules: {
                    name: [
                        { required: true, message: '请输入姓名', trigger: 'blur' },
                        { min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur' }
                    ],
                    age: [
                        { required: true, message: '请输入年龄', trigger: 'blur' },
                    ],
                    gender: [
                        { required: true, message: '请选择性别', trigger: 'change' }
                    ],
                    birthday: [
                        { required: true, message: '请选择日期', trigger: 'change' }
                    ],
                    county: [
                        { required: true, message: '请选择区域', trigger: 'change' }
                    ],
                },
                // btns: [
                //     {
                //         submit: true, content: '提交', type: 'primary', click: (form) => {
                //             this.submit({
                //                 form,
                //                 addApi: 'addTable',
                //                 editApi: 'editTable',
                //             })
                //         }
                //     },
                //     { reset: true, content: '重置', type: 'warning' },
                //     {
                //         content: '返回', click: () => {
                //             this.$router.back();
                //         }
                //     },
                // ]
            },
        };
    },

    methods: {
        async handlersubmit (form) {
            //     this.submit({
            //         form,
            //         addApi: 'addTable',
            //         editApi: 'editTable',
            //     })
        }
    }
};
</script>

<style lang="scss" scoped>
.page {
}
</style>